<template>
	<Tabs>
		<TabPane label="品牌编辑">
			<Form ref="form" :model="formData" label-position="top" :rules="rules">
				<FormDescItem prop="name" label="品牌名称" desc="品牌名称会作为商品品牌的标识，名称不可重复">
					<Input v-model="formData.name" />
				</FormDescItem>
				<FormDescItem label="品牌检索字母" desc="选择品牌检索字母，在筛选品牌时可以直接使用品牌字母进行检索">
					<Select filterable>
				        <Option v-for="item in letters" :key="item" :value="item">{{ item }}</Option>
				    </Select>
				</FormDescItem>
				<FormDescItem label="品牌简介" desc="设置商品品牌的简介，非必填项">
					<Input v-model="formData.descript" type="textarea" :rows="4" />
				</FormDescItem>
				<FormItem>
					<Button type="primary" :loading="committing" @click="handleSubmit">保存设置并启用</Button>
					<Button @click="handleBack">返回列表</Button>
				</FormItem>
			</Form>
		</TabPane>
	</Tabs>
</template>

<script>
import Util from '@/libs/util.js';
import FormDescItem from '@/components/form/FormDescItem.vue';
export default {
	components: {
		FormDescItem
	},
	data() {
		return {
			committing: false,
			letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
			formData: {
				id: '',
				name: '',
				descript: ''
			},
			rules: {
				name: [
					{required: true, message: "请填商品品牌名称", trigger: "blur"}
				]
			}
		}
	},
	mounted() {
		if(this.$route.query.id) {
			this.formData.id = this.$route.query.id;
			this.init();
		}
	},
	methods: {
		init() {
			Util.ajax.post(this.API['API_GOODS_BRAND_DETAIL'], {id: this.formData.id}).then(res => {
				this.formData.name = res.name;
				this.formData.descript = res.descript;
			}).catch(() =>{
				
			})
		},
		handleBack() {
			this.$router.back();
		},
		handleSubmit() {
			if(this.committing) return false;
			this.$refs.form.validate(valid => {
                if(valid) {
                	let path = this.API['API_GOODS_BRAND_CREATE'];
                	let params = {
                		name: this.formData.name,
                		descript: this.formData.descript
                	}
                	// 编辑
                	if(this.formData.id) {
                		path = this.API['API_GOODS_BRAND_SAVE'];
                		params.id = this.formData.id;
                	}else{
                		params = {
                			brand: params
                		}
                	}
                	this.committing = true;
                	Util.ajax.post(path, params).then(res => {
                		this.$Message.success({
                			content: '设置成功',
                			onClose: () => {
                				this.handleBack();
                			}
                		})
                	}).catch(() => {
                		this.committing = false;
                	})
                }
            });
		}
	}
}
</script>